<template>
  <div class="background">
    <div class="spec-preview">
      <img :src="spec.image" alt="" />
      <div class="event" @mousemove="handler"></div>
      <!-- 显示放大的图片 -->
      <div class="big">
        <img :src="spec.image" ref="big" />
      </div>
      <!-- 遮罩层 -->
      <div class="mask" ref="mask"></div>
    </div>
    <div class="spec-message">
      <h3 class="name">{{ spec.name }}</h3>
      <p class="price">{{ "￥" + spec.price }}</p>
      <br>
      <p class="inven">库存&nbsp;{{ spec.stock }}</p>
      <hr style="width: 520px;float: left;">
      <p class="desc">{{ spec.description }}</p>
      <hr style="width: 520px;float: left;margin-top:0px;">
      <br><br>
      <div class="count">
        <span class="count-label">数量</span>
        <span @click="decrement"><img src="@/assets/less@2x.png" alt="减一" class="count-btn1 "></span>
        <input class="count-input" type="text" v-model="count">
        <span @click="increment"><img src="@/assets/plus@2x.png" alt="加一" class="count-btn3"></span>
      </div>
      <div>
        <button class="buy" value="立即购买" @click="buy()">立即购买</button>
      </div>
      <div>
        <button class="shopping buy" value="加入购物车">加入购物车</button>
      </div>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" title="购买">
    <div>
      <el-form v-model="orderForm">
        <el-form-item label="预约时间">
          <el-date-picker v-model="orderForm.appointmentTime" type="datetime" placeholder="请选择预约时间" />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="orderForm.address"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="orderForm.description"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="buyConfirmed()">
          购买
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { getItemDetailById } from '@/api/item'
import { userCreateOrder } from '@/api/order'
export default {
  name: 'detail',
  data() {
    return {
      itemId: 1,
      spec: {
        image: '',
        name: '商品名称',
        price: '商品价格',
        stock: '1000',
        description: '描述',
      },
      count: 1,
      dialogVisible: false,
      orderForm: {
        itemId: null,
        number: null,
        appointmentTime: null,
        description: null,
        address: null,
      }
    }
  },
  methods: {
    handler(event) {
      let mask = this.$refs.mask;
      let big = this.$refs.big;
      //计算遮罩的左值以及顶部的值
      let left = event.offsetX - mask.offsetWidth / 2
      let top = event.offsetY - mask.offsetHeight / 2
      //判断方位超出的情况
      if (left < 0) {
        left = 0
      } else if (left > mask.offsetWidth) {
        left = 200
      }
      if (top < 0) {
        top = 0
      } else if (top > mask.offsetHeight) {
        top = 200
      }
      //将遮罩以及big图赋值定位  （此外big图为普通图的两倍大小 且方位为负值）
      mask.style.left = left + 'px'
      mask.style.top = top + 'px'
      big.style.left = -2 * left + 'px'
      big.style.top = -2 * top + 'px'
    },
    increment() {
      this.count++;
    },
    decrement() {
      if (this.count > 1) {
        this.count--;
      }
    },
    getItemDetail() {
      getItemDetailById({ id: this.itemId }).then((response) => {
        this.spec = response.data.data
      })
    },
    buy() {
      //表单初始化
      this.orderForm.itemId = this.itemId
      this.orderForm.number = this.count
      this.orderForm.description = null
      this.orderForm.appointmentTime = null,
      this.address = null

      this.dialogVisible = true
    },
    buyConfirmed(){
      userCreateOrder(this.orderForm).then((response)=>{
        console.log(response.data)
      })
      this.dialogFormVisible = false
    }
  },
  mounted: function () {
    this.itemId = this.$route.query.id;
    this.getItemDetail()
  }
}
</script>

<style scoped>
.background {
  border: 1px solid #f7b97f;
  width: 1266px;
  height: 500px;
  position: relative;
  margin-left: 45px;
  margin-top: 20px;
}

.spec-preview {
  position: relative;
  width: 400px;
  height: 400px;
  border: 1px solid #f8f4f0;
  margin-left: 20px;
  margin-top: 20px;
}

.spec-preview img {
  width: 100%;
  height: 100%;
}

.event {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 998;
}

.mask {
  width: 50%;
  height: 50%;
  background-color: rgba(197, 252, 183, 0.3);
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}

.big {
  width: 100%;
  height: 100%;
  position: absolute;
  top: -1px;
  left: 100%;
  border: 1px solid #aaa;
  overflow: hidden;
  z-index: 998;
  display: none;
  background: white;
}

.big img {
  width: 200%;
  max-width: 200%;
  height: 200%;
  position: absolute;
  left: 0;
  top: 0;
}

.event:hover~.mask,
.event:hover~.big {
  display: block;
}

.spec-message {

  float: right;
  position: relative;
  height: 400px;
  width: 712px;
  margin-top: -400px;
  margin-right: 24px;
}

.price {
  color: red;
  font-weight: bold;
  font-size: 24px;
}

.inven {
  color: rgb(151, 160, 160);
  font-size: 14px;
  margin-top: -35px;
  position: relative;
  margin-left: 4px;
}

.desc {
  font-weight: 600;
  width: 320px;
  height: 30px;
  margin-top: 45px;
}

.count-label {
  float: left;
  position: relative;
  margin-top: 10px;
  font-size: 22px;
  color: #ccc;
}

.count-btn1 {
  position: relative;
  margin-left: -121px;
  width: 50px;
  height: 50px;
}

.count-input {
  margin-left: 100px;
  margin-top: 8px;
  float: left;
  border: none;
  height: 35px;
  width: 50px;
  font-size: 24px;
  line-height: 30px;
  color: #000;
  position: relative;
}

.count-btn3 {
  position: relative;
  cursor: pointer;
  margin-left: 60px;
  width: 50px;
  height: 50px;
}

.buy {
  width: 320px;
  height: 35px;
  background: white;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: rgb(114, 84, 84);
  border: 1px solid #f5d1b4;
  margin-top: 38px;
  margin-left: -1px;
  cursor: pointer;
  letter-spacing: 2px;
}

.shopping {
  margin-left: -1px;
  background-color: #f5d1b4;
  color: rgb(114, 84, 84);
  font-weight: 600;
  margin-top: 20px;
}

.box3 {
  float: left;
  font-size: 14px;
  margin-top: -154px;
  margin-left: 600px;
  width: 400px;
}

.box4 {
  float: left;
  font-size: 14px;
  margin-top: -168px;
  margin-left: 690px;
  width: 400px;
}

.shadow {
  width: 140px;
  height: 140px;
  background: 50% top no-repeat rgb(218, 170, 170);
  opacity: .5;
  position: absolute;
  cursor: move;
  /* display: none; */
}

#right {
  width: 250px;
  height: 250px;
  position: absolute;
  /* border: 1px solid red; */
  background: url('img/big1.jpg'), center;
  background-repeat: no-repeat;
  display: none;
  overflow: hidden;
  background-size: 300%;
}
</style>